<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="" prop="uname">
        <el-input placeholder="请输入" v-model="querysele" class="input-with-select" style="width: 400px">
          <el-select v-model="order" slot="prepend" placeholder="请选择" style="width: 130px">
            <el-option label="设备名称" value="nickName"></el-option>
            <el-option label="型号" value="equipmentModel"></el-option>
            <el-option label="蓝牙mac地址" value="deviceId"></el-option>
            <el-option label="使用人" value="uname"></el-option>
            <el-option label="电话" value="uphone"></el-option>
          </el-select>
        </el-input>
        <el-form-item label="时间" prop="queryTime">
          <el-date-picker v-model="queryTime" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
      <el-form-item class="mb8">
        <el-col :span="1.5">
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
            v-hasPermi="['system:equipment:export']">导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="equipmentList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="设备名称" align="center" prop="nickName" />
      <el-table-column label="型号" align="center" prop="equipmentModel" />
      <el-table-column label="蓝牙mac地址" align="center" prop="deviceId" />
      <el-table-column label="使用人" align="center" prop="yhMinUser.uname" />
      <el-table-column label="电话" align="center" prop="yhMinUser.uphone" />

      <el-table-column label="绑定时间" align="center" prop="createTime" />
      <el-table-column v-if="$route.query.delFlag == '2'" label="解除绑定时间" align="center" prop="relieveTime" />
      <el-table-column label="操作" align="center" class-name="">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleDetails(scope.row)" v-hasPermi="['system:equipment:edit']">详情
          </el-button>
          <el-button size="mini" type="text"
            @click="$router.push({path: '/motion/detail',query: {id: scope.row.id,type: 'equipment'}})"
            v-hasPermi="['system:equipment:edit']">运动数据</el-button>
          <el-button size="mini" type="text" v-hasPermi="['system:equipment:edit']"
            @click="$router.push({path: '/prewarn/detaile',query: {id: scope.row.id, prewarnHealthDeviceId: scope.row.deviceId, type: 'equipment'}})">
            预警信息</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 添加或修改设备信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户id" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入用户id" />
        </el-form-item>
        <el-form-item label="设备名称" prop="equipmentName">
          <el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="设备型号" prop="equipmentModel">
          <el-input v-model="form.equipmentModel" placeholder="请输入设备型号" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="删除标志" prop="delFlag">
          <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
        </el-form-item>
        <el-divider content-position="center">用户基础信息信息</el-divider>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddYhMinUser">添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteYhMinUser">删除</el-button>
          </el-col>
        </el-row>
        <el-table :data="yhMinUserList" :row-class-name="rowYhMinUserIndex"
          @selection-change="handleYhMinUserSelectionChange" ref="yhMinUser">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="序号" align="center" prop="index" width="50" />
          <el-table-column label="用户名" prop="uname" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.uname" placeholder="请输入用户名" />
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="uphone" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.uphone" placeholder="请输入手机号" />
            </template>
          </el-table-column>
          <el-table-column label="openid" prop="openid" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.openid" placeholder="请输入openid" />
            </template>
          </el-table-column>
          <el-table-column label="0是手机1是微信" prop="unionid" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.unionid" placeholder="请输入0是手机1是微信" />
            </template>
          </el-table-column>
          <el-table-column label="头像" prop="avatar" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.avatar" placeholder="请输入头像" />
            </template>
          </el-table-column>
          <el-table-column label="用户等级(0是一级1是二级)" prop="utype" width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.utype" placeholder="请选择用户等级(0是一级1是二级)">
                <el-option label="请选择字典生成" value="" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="性别" prop="sex" width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.sex" placeholder="请选择性别">
                <el-option label="请选择字典生成" value="" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="出生日期" prop="birthData" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.birthData" placeholder="请输入出生日期" />
            </template>
          </el-table-column>
          <el-table-column label="身份证" prop="card" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.card" placeholder="请输入身份证" />
            </template>
          </el-table-column>
          <el-table-column label="年龄" prop="age" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.age" placeholder="请输入年龄" />
            </template>
          </el-table-column>
          <el-table-column label="身高" prop="height" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.height" placeholder="请输入身高" />
            </template>
          </el-table-column>
          <el-table-column label="体重" prop="weight" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.weight" placeholder="请输入体重" />
            </template>
          </el-table-column>
          <el-table-column label="最近就医id" prop="medicalId" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.medicalId" placeholder="请输入最近就医id" />
            </template>
          </el-table-column>
          <el-table-column label="医疗原因" prop="medicalReasons" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.medicalReasons" placeholder="请输入医疗原因" />
            </template>
          </el-table-column>
          <el-table-column label="近期用药" prop="recentMedication" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.recentMedication" placeholder="请输入近期用药" />
            </template>
          </el-table-column>
          <el-table-column label="药物频率id" prop="drugFrequencyId" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.drugFrequencyId" placeholder="请输入药物频率id" />
            </template>
          </el-table-column>
          <el-table-column label="药物类别_id" prop="drugCategoryId" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.drugCategoryId" placeholder="请输入药物类别_id" />
            </template>
          </el-table-column>
          <el-table-column label="药物名称" prop="drugName" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.drugName" placeholder="请输入药物名称" />
            </template>
          </el-table-column>
          <el-table-column label="亲属id(user表的user_id)" prop="relativesId" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.relativesId" placeholder="请输入亲属id(user表的user_id)" />
            </template>
          </el-table-column>
          <el-table-column label="亲属名称" prop="relativesName" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.relativesName" placeholder="请输入亲属名称" />
            </template>
          </el-table-column>
          <el-table-column label="亲属电话" prop="relativesPhone" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.relativesPhone" placeholder="请输入亲属电话" />
            </template>
          </el-table-column>
          <el-table-column label="关系id" prop="relationshipId" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.relationshipId" placeholder="请输入关系id" />
            </template>
          </el-table-column>
          <el-table-column label="用户地址" prop="address" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.address" placeholder="请输入用户地址" />
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createdTime" width="240">
            <template slot-scope="scope">
              <el-date-picker clearable v-model="scope.row.createdTime" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择创建时间" />
            </template>
          </el-table-column>
          <el-table-column label="更新时间" prop="updatedTime" width="240">
            <template slot-scope="scope">
              <el-date-picker clearable v-model="scope.row.updatedTime" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择更新时间" />
            </template>
          </el-table-column>
          <el-table-column label="经度" prop="longitude" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.longitude" placeholder="请输入经度" />
            </template>
          </el-table-column>
          <el-table-column label="纬度" prop="latitude" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.latitude" placeholder="请输入纬度" />
            </template>
          </el-table-column>
          <el-table-column label="用户昵称" prop="nickName" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.nickName" placeholder="请输入用户昵称" />
            </template>
          </el-table-column>
          <el-table-column label="用户所在国家" prop="country" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.country" placeholder="请输入用户所在国家" />
            </template>
          </el-table-column>
          <el-table-column label="用户所在省份 " prop="province" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.province" placeholder="请输入用户所在省份 " />
            </template>
          </el-table-column>
          <el-table-column label="用户所在城市 " prop="city" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.city" placeholder="请输入用户所在城市 " />
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listEquipment,
    getEquipment,
    delEquipment,
    addEquipment,
    updateEquipment
  } from "@/api/system/equipment";

  export default {
    name: "Equipment",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 子表选中数据
        checkedYhMinUser: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 设备信息表格数据
        equipmentList: [],
        // 用户基础信息表格数据
        yhMinUserList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userId: null,
          equipmentName: null,
          equipmentModel: null,
          id: null,
          uname: null,
          uphone: null,
          createTime: null,
          equipmentStartTime: null,
          equipmentEndTime: null,
          delFlag: 2
        },
        // 查询的输入项
        querysele: "",
        // 查询的选择项
        order: "",
        // 查询的开始、结束时间
        queryTime: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询设备信息列表 */
      getList() {
        this.loading = true;
        const ordername = this.order;
        let parse = {
          ...this.queryParams
        };
        parse[ordername] = this.querysele;
        parse["equipmentStartTime"] = this.queryTime[0];
        parse["equipmentEndTime"] = this.queryTime[1];
        parse["delFlag"] = this.$route.query.delFlag;
        listEquipment(parse).then(response => {
          this.equipmentList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          userId: null,
          equipmentName: null,
          equipmentModel: null,
          id: null,
          uname: null,
          uphone: null,
          createTime: null,
          equipmentStartTime: null,
          equipmentEndTime: null,
          delFlag: 2
        };
        this.querysele = "";
        this.order = "";
        this.queryTime = [];
        this.yhMinUserList = [];
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        (this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          userId: null,
          equipmentName: null,
          equipmentModel: null,
          id: null,
          uname: null,
          uphone: null,
          createTime: null,
          equipmentStartTime: null,
          equipmentEndTime: null,
          delFlag: 2
        }),
        (this.querysele = "");
        this.order = "";
        this.queryTime = [];
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加设备信息";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids;
        getEquipment(id).then(response => {
          this.form = response.data;
          this.yhMinUserList = response.data.yhMinUserList;
          this.open = true;
          this.title = "修改设备信息";
        });
      },
      /** 详情按钮操作 */
      handleDetails(row) {
        this.$router.push({
          path: "/equipmentDetails",
          query: {
            id: row.id,
            delFlag: row.delFlag
          }
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.yhMinUserList = this.yhMinUserList;
            if (this.form.id != null) {
              updateEquipment(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addEquipment(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal
          .confirm('是否确认删除设备信息编号为"' + ids + '"的数据项？')
          .then(function() {
            return delEquipment(ids);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
      /** 用户基础信息序号 */
      rowYhMinUserIndex({
        row,
        rowIndex
      }) {
        row.index = rowIndex + 1;
      },
      /** 用户基础信息添加按钮操作 */
      handleAddYhMinUser() {
        let obj = {};
        obj.uname = "";
        obj.uphone = "";
        obj.password = "";
        obj.openid = "";
        obj.unionid = "";
        obj.avatar = "";
        obj.utype = "";
        obj.sex = "";
        obj.birthData = "";
        obj.card = "";
        obj.age = "";
        obj.height = "";
        obj.weight = "";
        obj.medicalId = "";
        obj.medicalReasons = "";
        obj.recentMedication = "";
        obj.drugFrequencyId = "";
        obj.drugCategoryId = "";
        obj.drugName = "";
        obj.relativesId = "";
        obj.relativesName = "";
        obj.relativesPhone = "";
        obj.relationshipId = "";
        obj.address = "";
        obj.createdTime = "";
        obj.updatedTime = "";
        obj.longitude = "";
        obj.latitude = "";
        obj.nickName = "";
        obj.country = "";
        obj.province = "";
        obj.city = "";
        this.yhMinUserList.push(obj);
      },
      /** 用户基础信息删除按钮操作 */
      handleDeleteYhMinUser() {
        if (this.checkedYhMinUser.length == 0) {
          this.$modal.msgError("请先选择要删除的用户基础信息数据");
        } else {
          const yhMinUserList = this.yhMinUserList;
          const checkedYhMinUser = this.checkedYhMinUser;
          this.yhMinUserList = yhMinUserList.filter(function(item) {
            return checkedYhMinUser.indexOf(item.index) == -1;
          });
        }
      },
      /** 复选框选中数据 */
      handleYhMinUserSelectionChange(selection) {
        this.checkedYhMinUser = selection.map(item => item.index);
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          "system/equipment/export", {
            ...this.queryParams,
            delFlag: this.$route.query.delFlag
          },
          `equipment_${new Date().getTime()}.xlsx`
        );
      }
    }
  };
</script>
